<!DOCTYPE html>

<!--[if IEMobile 7]><html class="no-js iem7 oldie"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if (IE 9)&!(IEMobile)]><html class="no-js ie9" lang="en"><![endif]-->
<!--[if (gt IE 9)|(gt IEMobile 7)]><!--><html class="no-js" lang="en"><!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>{{ title }}</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- http://davidbcalhoun.com/2010/viewport-metatag -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- For all browsers -->
    <link rel="stylesheet" href="{{ stylesheet_path }}reset.css?v=1">
    <link rel="stylesheet" href="{{ stylesheet_path }}style.css?v=1">
    <link rel="stylesheet" href="{{ stylesheet_path }}colors.css?v=1">
    <link rel="stylesheet" media="print" href="{{ stylesheet_path }}print.css?v=1">
    <!-- For progressively larger displays -->
    <link rel="stylesheet" media="only all and (min-width: 480px)" href="{{ stylesheet_path }}480.css?v=1">
    <link rel="stylesheet" media="only all and (min-width: 768px)" href="{{ stylesheet_path }}768.css?v=1">
    <link rel="stylesheet" media="only all and (min-width: 992px)" href="{{ stylesheet_path }}992.css?v=1">
    <link rel="stylesheet" media="only all and (min-width: 1200px)" href="{{ stylesheet_path }}1200.css?v=1">
    <!-- For Retina displays -->
    <link rel="stylesheet" media="only all and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5)" href="{{ stylesheet_path }}2x.css?v=1">

    <!-- Webfonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

    <!-- Additional styles -->
    {% block stylesheets %}
    {% endblock %}

    <!-- JavaScript at bottom except for Modernizr -->
    <script src="{{ javascript_path }}libs/modernizr.custom.js"></script>

    <!-- For Modern Browsers -->
    <link rel="shortcut icon" href="img/favicons/favicon.png">
    <!-- For everything else -->
    <link rel="shortcut icon" href="img/favicons/favicon.ico">
    <!-- For retina screens -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/favicons/apple-touch-icon-retina.png">
    <!-- For iPad 1-->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/favicons/apple-touch-icon-ipad.png">
    <!-- For iPhone 3G, iPod Touch and Android -->
    <link rel="apple-touch-icon-precomposed" href="img/favicons/apple-touch-icon.png">

    <!-- iOS web-app metas -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Startup image for web apps -->
    <link rel="apple-touch-startup-image" href="img/splash/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    <link rel="apple-touch-startup-image" href="img/splash/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="img/splash/iphone.png" media="screen and (max-device-width: 320px)">

    <!-- Microsoft clear type rendering -->
    <meta http-equiv="cleartype" content="on">

</head>
{% block bodytag %}
<body class="clearfix with-menu reversed">
{% endblock %}
{% block main_content %}
    <!-- Prompt IE 6 users to install Chrome Frame -->
    <!--[if lt IE 7]><p class="message red-gradient simpler">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
    <header role="banner" id="title-bar">
        <h2>{% block titlebar %}{% endblock %}</h2>
    </header>
    {% block menu_hider %}<a href="#" id="open-menu"><span>Menu</span></a>{% endblock %}
    <section role="main" id="main">
    	<noscript class="message black-gradient simpler">Your browser does not support JavaScript! Some features won't work as expected...</noscript>
	    <hgroup id="main-title" class="thin">
	        <h1>{% block content_title %}{% endblock %}</h1>
	    </hgroup>
    	{% include "flashmessage.tpl" %}
        {% block content %}{% endblock %}
    </section>
{% endblock %}      

    {% block menu %}
    <!-- Sidebar/drop-down menu -->
    <!-- Sidebar/drop-down menu -->
    <section id="menu" role="complementary">

        <!-- This wrapper is used by several responsive layouts -->
        <div id="menu-content">

            <header>
                Admin<br>
                
            </header>
            <div id="profile">
                <p>Welcome Administrator</p>
            </div>


            <ul id="access" class="children-tooltip">
                <li><a href="http://dev1.radic.nl/" title="View website"><span class="icon-play"></span></a></li>
                <li><a href="http://dev1.radic.nl/admin/users" title="Your profile"><span class="icon-user"></span></a></li>
                <li><a href="http://dev1.radic.nl/admin/auth/logout" title="Log out"><span class="icon-lightning"></span></a></li>
            </ul>

            <section class="navigable">
                <ul class="big-menu">
                    <li class="with-right-arrow">
                        <a href="http://dev1.radic.nl/admin">Dashboard</a>
                    </li>
                    <li class="with-right-arrow">
                        <a href="http://dev1.radic.nl/admin/config">Configuration</a>
                    </li>
                    <li class="with-right-arrow">
                        <a href="http://dev1.radic.nl/admin/users">Users</a>
                    </li>
                    <li class="with-right-arrow">
                        <a href="http://dev1.radic.nl/admin/pages">Pages</a>
                    </li>
                    <li class="with-right-arrow">
                        <a href="http://dev1.radic.nl/admin/menus">Menus</a>
                    </li>
                    <li class="with-right-arrow">
                        <a href="http://dev1.radic.nl/admin/widgets">Widgets</a>
                    </li>
                    <li class="with-right-arrow">
                        <a href="http://dev1.radic.nl/admin/modules">Modules</a>
                    </li>
                    
                </ul>
            </section>
            <!--
            <ul class="unstyled-list">
                <li class="title-menu">Today's event</li>
                <li>
                    <ul class="calendar-menu">
                        <li>
                            <a href="#" title="See event">
                                <time datetime="2011-02-24"><b>24</b> Feb</time>
                                <small class="green">10:30</small>
                                Event's description
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="title-menu">New messages</li>
                <li>
                    <ul class="message-menu">
                        <li>
                            <span class="message-status">
                                <a href="#" class="starred" title="Starred">Starred</a>
                                <a href="#" class="new-message" title="Mark as read">New</a>
                            </span>
                            <span class="message-info">
                                <span class="blue">17:12</span>
                                <a href="#" class="attach" title="Download attachment">Attachment</a>
                            </span>
                            <a href="#" title="Read message">
                                <strong class="blue">John Doe</strong><br>
                                <strong>Mail subject</strong>
                            </a>
                        </li>
                        <li>
                            <a href="#" title="Read message">
                                <span class="message-status">
                                    <span class="unstarred">Not starred</span>
                                    <span class="new-message">New</span>
                                </span>
                                <span class="message-info">
                                    <span class="blue">15:47</span>
                                </span>
                                <strong class="blue">May Starck</strong><br>
                                <strong>Mail subject a bit longer</strong>
                            </a>
                        </li>
                        <li>
                            <span class="message-status">
                                <span class="unstarred">Not starred</span>
                            </span>
                            <span class="message-info">
                                <span class="blue">15:12</span>
                            </span>
                            <strong class="blue">May Starck</strong><br>
                            Read message
                        </li>
                    </ul>
                </li>
            </ul>

        </div>
        <!-- End content wrapper -->

   

    </section>
    <!-- End sidebar/drop-down menu -->
    {% endblock %}

    <!-- JavaScript at the bottom for fast page loading -->

    <!-- Scripts -->
    <script src="{{ javascript_path }}libs/jquery-1.7.2.min.js"></script>
    <script src="{{ javascript_path }}libs/jquery-ui-1.8.22.js"></script>
    <script src="{{ javascript_path }}setup.js"></script>

	{% block javascripts %}
    <script>
        // Call template init (optional, but faster if called manually)
        $.template.init();
    </script>
	{% endblock %}
</body>
</html>